import { observer } from 'mobx-react-lite'
import AppleItem from '../AppleItem'
import { useRootStore } from '../../stores'
import './index.scss'

function AppleBasket () {
  const { appleStore } = useRootStore()
  const { remainAppleList, picking, pickApple, remainAppleCount, remainAppleWeight, eatenAppleCount, eatenAppleWeight } = appleStore

  return (
    <div className="appleBusket">
      <div className="title">苹果篮子</div>

      <div className="stats">
        <div className="section">
          <div className="head">当前</div>
          <div className="content">
            {remainAppleCount}个苹果，{remainAppleWeight}克
          </div>
        </div>
        <div className="section">
          <div className="head">已吃掉</div>
          <div className="content">
            {eatenAppleCount}个苹果，{eatenAppleWeight}克
          </div>
        </div>
      </div>

      <div className="appleList">
        {
          remainAppleList.length
            ? remainAppleList.map(apple => (
            <AppleItem apple={apple} key={apple.appleId} />
          ))
            : <div className="empty-tip" key="empty">
            苹果篮子空空如也
          </div>
        }
      </div>

      <div className="btn-div">
        <button className={picking ? 'disabled' : ''} onClick={pickApple}>{picking ? '正在采摘…' : '摘苹果'}</button>
      </div>
    </div>
  )
}

export default observer(AppleBasket)